{{ define "public/footer.html" }}
<div class="right-bar" id="rightbar">
    <div data-simplebar class="h-100">
        <div class="rightbar-title flex align-items-center bg-dark p-3">
            <h5 class="m-0 me-2 text-white">主题设置</h5>
            <a href="javascript:void(0);" class="right-bar-toggle ms-auto">
                <i class="mdi mdi-close noti-icon"></i>
            </a>
        </div>
        <div class="drawer-container">
            <div class="drawer-item">
                <span>标签页</span>
                <el-switch @change="selectTag" :active-value="1" :inactive-value="0" v-model="setting.tagsView" class="drawer-switch" />
            </div>
            <div class="drawer-item">
                <p>顶部背景色</p>
                <el-radio-group v-model="setting.topbg" @change="selectTopBg" size="mini">
                    <el-radio-button label="light">白色</el-radio-button>
                    <el-radio-button label="blank">黑色</el-radio-button>
                    <el-radio-button label="dark">蓝色</el-radio-button>
                </el-radio-group>
            </div>
            <div class="drawer-item">
                <p>侧栏背景色</p>
                <el-radio-group v-model="setting.sidebg" @change="selectSideBg" size="mini">
                    <el-radio-button label="dark">黑色</el-radio-button>
                    <el-radio-button label="brand">蓝色</el-radio-button>
                    <el-radio-button label="light">白色</el-radio-button>
                </el-radio-group>
            </div>
        </div>
    </div>
</div>
<div class="rightbar-overlay"></div>
<script>
    var siteconfig
    if(Cookies.get(base_url+'siteconfig')){
        siteconfig = JSON.parse(Cookies.get(base_url+'siteconfig'))
        document.body.setAttribute('data-topbar', siteconfig.topbg)
        parent.document.body.setAttribute('data-sidebar', siteconfig.sidebg)
        var classname = !siteconfig.tagsView ? 'hiddenbox' : 'showbox'
        document.getElementById('app').setAttribute('tag-box', classname)
    }

    new Vue({
        el: '#rightbar',
        data(){
            return {
                setting:{
                    tagsView:1,
                    topbg:'light',
                    sidebg:'dark',
                }
            }
        },
        mounted(){
            if(Cookies.get(base_url+'siteconfig')){
                this.setting = JSON.parse(Cookies.get(base_url+'siteconfig'))
            }
        },
        methods:{
            selectTopBg(val){
                document.body.setAttribute('data-topbar', val)
                Cookies.set(base_url+'siteconfig',JSON.stringify(this.setting))
            },
            selectSideBg(val){
                parent.document.body.setAttribute('data-sidebar', val)
                Cookies.set(base_url+'siteconfig',JSON.stringify(this.setting))
            },
            selectTag(val){
                var classname = !val ? 'hiddenbox' : 'showbox'
                document.getElementById('app').setAttribute('tag-box', classname)
                Cookies.set(base_url+'siteconfig',JSON.stringify(this.setting))
            }
        },
    })
</script>
{{ end }}